<template>
  <view class="content">
    <ve-form ref="ve_form" :model="form" :rules="rules">
      <ve-card title="" type="none">
        <ve-form-item label="会员标签" :borderBottom="false">
          <ve-picker-inline v-model="form.memberLabel" placeholder="请选择" :range="dict.MemberLabelInfoEnum"> </ve-picker-inline>
        </ve-form-item>
      </ve-card>
      <ve-bottom-box size="mini">
        <ve-button type="primary" size="long" @click="handleSave">确认</ve-button>
      </ve-bottom-box>
    </ve-form>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { memberDetail, addLabel } from '@/api/market/member'
import { usePageDict } from '@/hooks/useDict'

const dict = usePageDict('memberDict')

const form = ref({})
// const { foldStatus, foldValidate } = useFormFold([
//   {
//     key: 'fold1',
//     props: ['memberName', 'phone'],
//   },
//   {
//     key: 'fold2',
//     props: [],
//   },
//   {
//     key: 'fold3',
//     props: [],
//   },
// ])

const rules = ref({
  memberLabel: {
    required: false,
    message: '请选择会员标签',
  },
})

const ve_form = ref(null)
const handleSave = () => {
  // 表单验证
  ve_form.value.validate((valid, errors) => {
    if (valid) {
      console.log('验证通过')
      const params = {
        ...form.value,
      }
      addLabel(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: '操作成功',
            icon: 'none',
          })
          uni.$emit('refreshData')
          uni.navigateBack({
            delta: 1,
          })
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
        }
      })
    } else {
      // foldValidate(errors)
      console.log('验证失败', errors)
    }
  })
}


const getDetail = async (id) => {
  console.log(id.id)
  const res = await memberDetail({ id: id.id })
  if (res.code === 200) {
    const data = res.result
    form.value.id = data.id
    form.value.memberLabel = data.memberLabel
  }
}

onShow(() => {})

onLoad((id) => {
  console.log(id)
  if (id.id) {
    getDetail(id)
  }
})
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24rpx;
  background: #f7f8fa;
}
.flex_img {
  display: flex;
  justify-content: space-around;
}
.ui_driving_up {
  position: relative;
  width: 284rpx;
  height: 184rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  border-radius: 16rpx;
}
.ui_driving_up image {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}
.ui_driving_down {
  position: relative;
  width: 284rpx;
  height: 184rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  border-radius: 16rpx;
}
.ui_driving_down image {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}
</style>
